<template>
  <section class="detail-box">
    <el-row type="flex" justify="space-between" class="detail-top-nav">
      <span>新生报名信息（{{studentInfo.isEnroll === 0 ? '未录取' : '已录取'}}）</span>
    </el-row>
    <el-row class="detail-info">
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left">姓名</span>
          <span>{{studentInfo.name}}</span>
        </div>
        <div class="info-item">
          <span class="left">性别</span>
          <span>{{studentInfo.sex | sexFilter}}</span>
        </div>
        <div class="info-item">
          <span class="left">出身日期</span>
          <span>{{studentInfo.birth | timeFormat('yyyy-MM-dd')}}</span>
        </div>
        <div class="info-item">
          <span class="left">证件类型</span>
          <span>{{studentInfo.idType | idTypeFilter}}</span>
        </div>
        <div class="info-item">
          <span class="left">证件号码</span>
          <span>{{studentInfo.cardNo}}</span>
        </div>
        <div class="info-item">
          <span class="left">家庭住址</span>
          <span>{{`${studentInfo.province}${studentInfo.city}${studentInfo.county}`}}</span>
        </div>
        <div class="info-item">
          <span class="left">详细地址</span>
          <span>{{studentInfo.address}}</span>
        </div>
        <div class="info-item">
          <span class="left">级别</span>
          <span>{{studentInfo.gradeYear}}级</span>
        </div>
        <div class="info-item">
          <span class="left">班级</span>
          <span>{{studentInfo.className}}</span>
        </div>
        <!-- <div class="info-item">
          <span class="left">学号</span>
          <span>{{studentInfo.infoNo}}</span>
        </div> -->
        <div class="info-item">
          <span class="left">父/母姓名</span>
          <span>{{studentInfo.guardian}}</span>
        </div>
        <div class="info-item">
          <span class="left">联系电话</span>
          <span>{{studentInfo.mobile}}</span>
        </div>
        <div class="info-item btn-item">
          <router-link :to="{name: 'studentEdit', query: {id: studentId}}">
            <el-button class="detail-btn modify-btn" size="small">修改</el-button>
          </router-link>
          <el-button type="primary" size="small" class="detail-btn" @click="record">{{studentInfo.isEnroll === 0 ? '录取' : '取消录取'}}</el-button>
        </div>
      </el-col>
    </el-row>
    <choose-class :show-dialog="showFlag" :data-lists="classList" :close-callback="diaClose" v-on:select="confirm">
      <span slot="titleName">选择缴费班级</span>
    </choose-class>
  </section>
</template>
<script>
import { getStudentDetail, getStudentEnroll, getClassList } from 'api/school/student/index'
import common from 'src/util/common'
import chooseClass from 'components/chooseclass/chooseClass'
export default {
  data () {
    return {
      studentInfo: {},
      studentId: Number(common.params('id')),
      classList: [],
      showFlag: false
    }
  },
  created () {
    getStudentDetail({
      id: this.studentId
    }).then(res => {
      this.studentInfo = res.data
    })
    getClassList().then(res => {
      this.classList = res.data
    })
  },
  components: {
    chooseClass
  },
  methods: {
    diaClose () {
      this.showFlag = false
    },
    record () {
      if (this.studentInfo.isEnroll === 0) { // 录取
        this.showFlag = true
      } else { // 取消录取
        this.enroll({ids: [this.studentId], enroll: 0})
      }
    },
    confirm (obj) {
      this.enroll({
        ids: [this.studentId],
        enroll: 1,
        classId: obj.classId,
        gradeYear: obj.gradeId
      })
    },
    enroll (params) {
      getStudentEnroll(params).then(res => {
        this.$router.push({name: 'studentReportManage'})
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .detail-box {
    padding: 20px 10px 0;
    .detail-top-nav {
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }
    .detail-info {
      padding: 12px 10px 0;
      .info-title {
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;
        padding-left: 10px;
      }
      .info-item {
        padding-left: 10px;
        padding-bottom: 16px;
      }
      .info-item:last-child {
        padding-bottom: 0;
      }
      .left {
        display: inline-block;
        width: 120px;
        text-align: left;
        color: gray;
      }
      .btn-item {
        margin-top: 20px;
      }
      .detail-btn {
        width: 150px;
      }
      .modify-btn {
        color: #1d90e6;
        border-color: #1d90e6;
        margin-right: 20px;
      }
    }
  }
</style>
